<template>
  <div class="detailbox">
    <!-- 轮播图和图片 -->
    <el-row :gutter="10" class="lunbobox" v-show="isexitfan">
      <el-col :span="12" class="left">
        <img
          src="https://z1.muscache.cn/im/pictures/c2b1fbe5-219c-4bef-94cb-2199bdb0f774.jpg?aki_policy=xx_large"
          @click="isshow = true"
        />
      </el-col>
      <el-col :span="12" class="right">
        <el-row :gutter="10" class="top">
          <el-col :span="12">
            <img
              src="https://z1.muscache.cn/im/pictures/c2b1fbe5-219c-4bef-94cb-2199bdb0f774.jpg?aki_policy=xx_large"
              @click="isshow = true"
            />
          </el-col>
          <el-col :span="12">
            <img
              src="https://z1.muscache.cn/im/pictures/c2b1fbe5-219c-4bef-94cb-2199bdb0f774.jpg?aki_policy=xx_large"
              @click="isshow = true"
            />
          </el-col>
        </el-row>
        <el-row :gutter="10" class="bottom">
          <el-col :span="12">
            <img
              src="https://z1.muscache.cn/im/pictures/c2b1fbe5-219c-4bef-94cb-2199bdb0f774.jpg?aki_policy=xx_large"
              @click="isshow = true"
            />
          </el-col>
          <el-col :span="12">
            <img
              src="https://z1.muscache.cn/im/pictures/c2b1fbe5-219c-4bef-94cb-2199bdb0f774.jpg?aki_policy=xx_large"
              @click="isshow = true"
            />
          </el-col>
        </el-row>
      </el-col>
      <el-row :gutter="20" class="btnbox">
        <el-col :span="12">
          <el-button round @click="isshow = true">查看图片</el-button>
        </el-col>
        <el-col :span="12">
          <el-button round @click="showcollect">
            <span>心愿</span>
            <el-icon v-if='meiyousc'><Star /></el-icon>
            <el-icon v-if='scchenggong' style="color:goldenrod"><StarFilled /></el-icon>
          </el-button>
        </el-col>
      </el-row>
    </el-row>

    <!-- 收藏弹窗 -->
    <el-dialog v-model="dialogFormVisible" title="您的心愿单">
      <el-row>
        <el-col :span="3">
          <div class="chuangjianbox" @click="newxinyuan">
            <el-icon class="plusicon"><Plus /></el-icon>
          </div>
        </el-col>
        <el-col :span="12" class="xinyuantextbox">
          <div @click="newxinyuan" class="xinyuantext">创建新的心愿单</div>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="3">
          <div class="morenbox" @click="morenxinyuan"></div>
        </el-col>
        <el-col :span="12" class="xinyuantextbox">
          <div @click="morenxinyuan" class="xinyuantext">默认合辑</div>
        </el-col>
      </el-row>
    </el-dialog>
    <!-- 创建新的心愿 -->
    <el-dialog v-model="dialogTableVisible" title="为此心愿单进行命名">
      <el-input v-model="xinyunmyself" placeholder="名称" clearable autocomplete/>
      <template #footer>
        <el-button type="primary" @click="xinyuanconfirm">创建</el-button>
    </template>
    </el-dialog>

    <!-- 模态弹窗图片 -->
    <teleport to="body">
      <div class="motaibox" v-show="isshow">
        <el-carousel :interval="4000" type="card" class="box">
          <el-carousel-item
            v-for="(item, index) in imgarr"
            :key="index"
            class="img"
          >
            <img :src="item" />
          </el-carousel-item>
        </el-carousel>
        <div class="cancelbox">
          <el-button circle @click="isshow = false">
            <el-icon><Close /></el-icon>
          </el-button>
        </div>
      </div>
    </teleport>
    <!-- 组件切换栏 -->
    <el-row :gutter="20" :class="{ headerbox: true, headerboxfixed: isexit }">
      <el-col :span="24" class="navbox">
        <el-menu
          :default-active="activeIndex"
          class="el-menu-demo"
          mode="horizontal"
          active-text-color="green"
          @select="handleSelect"
        >
          <el-menu-item index="1">详情</el-menu-item>
          <el-menu-item index="2">评价</el-menu-item>
          <el-menu-item index="3">房源预订</el-menu-item>
          <el-menu-item index="4">位置</el-menu-item>
          <el-menu-item index="5">须知</el-menu-item>
          <el-menu-item index="6">房东</el-menu-item>
        </el-menu>
      </el-col>
    </el-row>
    <!-- 版心的组件 -->
    <div :class="{ commonlayout: true, commonlayoutfixed: isexit }">
      <el-container>
        <el-main>
          <!-- 动态组件 -->
          <el-row :gutter="20">
            <el-col :span="22" class="componentbox">
              <keep-alive>
                <component
                  :is="mycomponent[componentID.type]"
                  :hid="hid"
                ></component>
              </keep-alive>
            </el-col>
            <el-col :span="2"></el-col>
          </el-row>
        </el-main>
        <el-aside width="40%" class="asidebox">
          <el-tabs type="border-card" class="demotabs">
            <el-tab-pane>
              <template #label>
                <span class="custom-tabs-label">
                  <el-icon><Ship /></el-icon>
                  <span>热门旅游</span>
                </span>
              </template>
              <el-row>
                <el-col
                  v-for="(o, index) in lvyoucitarr"
                  :key="index"
                  :span="11"
                  class="hotlvbox"
                >
                  <el-card :body-style="{ padding: '0px' }">
                    <img :src="o.siteimg[0]" class="image" />
                    <div style="padding: 14px">
                      <span>{{ o.secondcity }}</span>
                      <div class="bottom">
                        <time class="time">{{ currentDate }}</time>
                        <el-button
                          text
                          class="button"
                          @click="tocity(o.firstcity, o.secondcity)"
                          >查看{{ o.firstcity }}更多</el-button
                        >
                      </div>
                    </div>
                  </el-card>
                </el-col>
              </el-row>
            </el-tab-pane>
            <el-tab-pane>
              <template #label>
                <span class="custom-tabs-label">
                  <el-icon><Bicycle /></el-icon>
                  <span>体验</span>
                </span>
              </template>
              <el-row>
                <el-col v-for="o in 2" :key="o" :span="11" class="hotlvbox">
                  <el-card :body-style="{ padding: '0px' }">
                    <img
                      src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png"
                      class="image"
                    />
                    <div style="padding: 14px">
                      <span>Yummy hamburger</span>
                      <div class="bottom">
                        <time class="time">{{ currentDate }}</time>
                        <el-button text class="button">Operating</el-button>
                      </div>
                    </div>
                  </el-card>
                </el-col>
              </el-row>
            </el-tab-pane>
          </el-tabs>
        </el-aside>
      </el-container>
    </div>
  </div>
</template>

<script setup>
import evaluate from "./lr/evaluate.vue";
import reserve from "./lr/reserve.vue";
import { ElMessage } from 'element-plus'
import {
  ref,
  reactive,
  onMounted,
  onBeforeUnmount,
  getCurrentInstance,
} from "vue";
import { useRoute, useRouter } from "vue-router";
let { proxy } = getCurrentInstance();
let route = useRoute();
let router = useRouter();
let hid = ref(6);
// 模态弹窗关闭变量
let isshow = ref(false);
// 轮播图的图片数组
let imgarr = ref([
  "https://z1.muscache.cn/im/pictures/c2b1fbe5-219c-4bef-94cb-2199bdb0f774.jpg?aki_policy=xx_large",
  "https://z1.muscache.cn/im/pictures/c2b1fbe5-219c-4bef-94cb-2199bdb0f774.jpg?aki_policy=xx_large",
  "https://z1.muscache.cn/im/pictures/c2b1fbe5-219c-4bef-94cb-2199bdb0f774.jpg?aki_policy=xx_large",
  "https://z1.muscache.cn/im/pictures/c2b1fbe5-219c-4bef-94cb-2199bdb0f774.jpg?aki_policy=xx_large",
  "https://z1.muscache.cn/im/pictures/c2b1fbe5-219c-4bef-94cb-2199bdb0f774.jpg?aki_policy=xx_large",
  "https://z1.muscache.cn/im/pictures/c2b1fbe5-219c-4bef-94cb-2199bdb0f774.jpg?aki_policy=xx_large",
]);
// 组件切换栏
let activeIndex = ref("1");
let componentID = reactive({
  type: 2,
});
let mycomponent = {
  // 1: Daily,
  2: evaluate,
  3: reserve,
};
let handleSelect = (key) => {
  switch (key) {
    // case "1":
    //   componentID.type = mycomponent.particulars;
    //   console.log(key, componentID.type);
    //   break;
    case "2":
      componentID.type = "2";
      console.log(key, componentID.type);
      break;
    case "3":
      componentID.type = "3";
      console.log(key, componentID.type);
      break;
    // case "4":
    //   componentID.type = mycomponent.site;
    //   console.log(key, componentID.type);
    //   break;
    // case "5":
    //   componentID.type = mycomponent.notice;
    //   console.log(key, componentID.type);
    //   break;
    // case "6":
    //   componentID.type = mycomponent.landlord;
    //   console.log(key, componentID.type);
    //   break;
  }
};

const currentDate = ref(new Date().toLocaleDateString());
// 组件切换栏是否固定
let isexit = ref(false);
let isexitfan = ref(true);
// 心愿收藏
let scchenggong=ref(false);
let meiyousc=ref(true);
const dialogFormVisible = ref(false);
const dialogTableVisible = ref(false);
let token = localStorage.getItem("token");
// console.log(token);
let collectflag = false;
let showcollect = () => {
  // if(token==null){
  //   router.push('login');
  // }
  collectflag = !collectflag;
  if (collectflag) {
    dialogFormVisible.value = true;
  } else {
    meiyousc.value=true;
    scchenggong.value=false;
    console.log("取消收藏");
  }
};
let newxinyuan = () => {
  dialogTableVisible.value = true;
};
let morenxinyuan = () => {
  dialogTableVisible.value = false;
  dialogFormVisible.value = false;
  scchenggong.value=true;
  meiyousc.value=false;
  ElMessage({
    message: `心愿成功收藏到默认合辑`,
    type: 'success',
  });
  proxy.$axios(`/xinyuaninsert`)
};
// 创建心愿合计名
const xinyunmyself = ref('');
let xinyuanconfirm=()=>{
  dialogTableVisible.value = false;
  dialogFormVisible.value = false;
  scchenggong.value=true;
  meiyousc.value=false;
  ElMessage({
    message: `心愿成功收藏到${xinyunmyself.value}`,
    type: 'success',
  });
  proxy.$axios(`/xinyuaninsert?album=${xinyunmyself.value}`);
}

onMounted(() => {
  // 监听滚动条位置
  window.addEventListener("scroll", scrollTop, true);
});
onBeforeUnmount(() => {
  window.removeEventListener("scroll", () => {}); // 离开当前组件移除事件监听
});

// 获取实时滚动条高度
const scrollTop = () => {
  let scroll = document.documentElement.scrollTop || document.body.scrollTop;
  // console.log(scroll);
  if (scroll >= 350) {
    isexit.value = true;
    isexitfan.value = false;
  } else if (scroll <= 7) {
    isexit.value = false;
    isexitfan.value = true;
  }
};
// 旅游城市推荐
let lvyoucitarr = ref();
onMounted(async () => {
  let res = await proxy.$axios("/travltuijian");
  // console.log(res.data);
  lvyoucitarr.value = res.data.ressql;
});
// 跳转旅游城市
let tocity = (firstcity, secondcity) => {
  // console.log(city,2222)
  router.push(`/travelguide?firstcity=${firstcity}&secondcity=${secondcity}`);
};
</script>

<style lang='scss' scoped>
.motaibox {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background-color: rgba(20, 20, 20, 0.7);
  z-index: 100;
  .box {
    width: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    .img {
      border-radius: 20px;
    }
  }
  .cancelbox {
    position: absolute;
    left: 50%;
    top: 10%;
  }
}
.detailbox {
  .lunbobox {
    height: 358px;
    position: relative;
    img {
      border-radius: 4px;
      opacity: 0.8;
      &:hover {
        transform: scale(1.05);
        opacity: 1;
        transition: all 0.5s;
      }
    }
    .left {
      img {
        width: 100%;
        height: 358px;
      }
    }
    .right {
      .top {
        img {
          width: 100%;
          height: 177px;
        }
      }
      .bottom {
        img {
          width: 100%;
          height: 177px;
        }
      }
    }
    .btnbox {
      position: absolute;
      bottom: 0;
      right: 7px;
      .el-icon {
        color: goldenrod;
        height: 20px;
        width: 20px;
      }
    }
  }
  .componentbox {
    margin-left: 20px;
    margin-top: 20px;
  }
  .headerbox {
    width: 100% !important;
    margin-left: 20px !important;
  }
  .headerboxfixed {
    width: 100%;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 10;
  }
  .commonlayout {
    width: 100%;
    .asidebox {
      margin-top: 100px;
      .time {
        font-size: 12px;
        color: #999;
      }

      .bottom {
        margin-top: 13px;
        line-height: 12px;
        display: flex;
        justify-content: space-between;
        align-items: center;
      }

      .button {
        padding: 0;
        min-height: auto;
      }

      .image {
        width: 100%;
        display: block;
      }
      .hotlvbox {
        margin-left: 20px;
      }
    }
  }
}
.chuangjianbox {
  width: 70px;
  height: 70px;
  border: 1px solid rgb(202, 174, 174);
  border-radius: 10px;
  position: relative;
  margin-bottom: 10px;
  .plusicon {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    font-size: 27px;
    font-weight: 700;
  }
}
.morenbox {
  width: 70px;
  height: 70px;
  border: 1px solid white;
  border-radius: 10px;
  background-color: grey;
  margin-bottom: 10px;
}
.xinyuantextbox {
  height: 70px;
  line-height: 70px;
  .xinyuantext {
    font-size: 16px;
    font-weight: 700;
  }
}
</style>